<template name="Shared">
  {{#contentFor "menu"}}
    {{> SharedMenu}}
  {{/contentFor}}

  {{#Layout template="InboxLayout"}}
    <div class="shared-messages">
      {{#each messages}}
        {{> SharedMessage}}
      {{/each}}
      {{#if ready}}
        {{#unless messages.count}}
          <p class="bg-success" style="padding: 15px; margin: 10px;">
            {{_ "share_desc"}}
          </p>
        {{/unless}}
        {{#if nextPath}}
          <div class="text-center"><a href="{{nextPath}}" class="text-muted small">{{_ "paginate_load_more"}}</a></div>
        {{/if}}
      {{else}}
        <div class="text-center text-muted small"><i class="fa fa-spinner fa-spin"></i></div>
      {{/if}}
    </div>
  {{/Layout}}
</template>

<template name="SharedMessage">
  <div class="message">
    {{#LinkToCardModal user=user}}
      {{> avatar user=user shape="circle" class="img-circle pull-left" size="small"}}
    {{/LinkToCardModal}}
    <div class="message-body">
      <div class="title">
        <div class="name">{{user.name}}</div>
        {{#with user.profile.message}}
          <span class="text-muted small">{{this}}</span>
        {{/with}}
      </div>
      {{> MessageContent}}
      <div class="text-muted small">
        <a href="#" class="pull-right btn-comment text-muted action"><i class="fa fa-comment-o"></i> {{_ 'share_action_comment'}}</a>
        {{#if liked}}
          <a href="#" class="pull-right btn-like text-muted action">
            {{countReact 'like'}}
            <i class="fa fa-heart"></i> {{_ 'app_action_cancel'}}
          </a>
        {{else}}
          <a href="#" class="pull-right btn-like text-muted action">
            {{countReact 'like'}}
            <i class="fa fa-heart-o"></i> {{_ 'app_action_like'}}
          </a>
        {{/if}}
        {{formatDayWithTime createdAt}}
      </div>
      {{#if (isMe user)}}
        {{#if likeUsers.length}}
          <div class="react-container like">
            <div class="icon"><i class="fa fa-heart-o"></i></div>
            <div class="like-users clearfix">
              {{#each likeUsers}}
                {{#LinkToCardModal user=this class="like-user pull-left"}}
                  {{> avatar user=this shape="circle" class="img-circle" size="tiny"}}
                {{/LinkToCardModal}}
              {{/each}}
            </div>
          </div>
        {{/if}}
      {{/if}}
      {{#if comments.count}}
        <div class="react-container">
          <div class="icon"><i class="fa fa-comment-o"></i></div>
          <ul class="comments">
            {{#each comments}}
              <li>
                {{#LinkToCardModal user=user class="comment-avatar pull-left"}}
                  {{> avatar user=user shape="circle" class="img-circle" size="tiny"}}
                {{/LinkToCardModal}}
                <div>
                  {{#LinkToCardModal user=user}}
                    {{user.name}}
                  {{/LinkToCardModal}}
                  <span class="text-muted pull-right small">{{formatDayWithTime createdAt}}</span>
                </div>
                <div>{{content}}</div>
              </li>
            {{/each}}
          </ul>
        </div>
      {{/if}}
    </div>
  </div>
</template>

<template name="SharedMenuItem">
  <li class="{{#if inRouter 'shared'}}active{{/if}}">
    <a href="/shared">
      <i class="fa fa-connectdevelop"></i> <span>{{_ 'app_discover'}}</span>
      {{#unless shared.read}}
        <span class="pull-right-container">
          <span class="label pull-right"><i class="fa fa-circle text-red"></i></span>
        </span>
      {{/unless}}
    </a>
  </li>
</template>

<template name="SharedMenu">
  <p class="navbar-text pull-left menu-title">
    {{#if user}}
      {{user.name}}
    {{else}}
      {{_ 'app_discover'}}
    {{/if}}
  </p>
  {{#if compare user '!|' (isMe user)}}
    <div class="navbar-custom-menu">
      <ul class="nav navbar-nav share-menu">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle menu-title" data-toggle="dropdown">
            <i class="fa fa-camera"></i>
            <span class="hidden-xs">{{_ 'share_action'}}</span>
          </a>
          <ul class="dropdown-menu">
            <input type="file" style="display:none;" id="image-file" accept="image/*"/>
            <li><a href="#" id="btn-share-image">{{_ 'share_action_image'}}</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#" id="btn-share">{{_ 'share_action_files'}}</a></li>
          </ul>
        </li>
      </ul>
    </div>
  {{/if}}
</template>

<template name="LinkToUserShared">
  <a href="#" class="btn-shared {{class}}">{{> UI.contentBlock}}</a>
</template>

<template name="ShareModal">
  <div class="modal fade modal-rounded">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="btn-close-ShareModal">&times;</button>
          <h4 class="modal-title">{{_ "share_action"}}</h4>
        </div>
        <div class="modal-body no-padding">
          {{> MessageForm thread=this}}
        </div>
      </div>
    </div>
  </div>
</template>
